<template>
    <el-row class="user-info-form" type="flex" justify="center">
        <el-col>
            <el-form label-width="150px" :model="watchInfoForm" :rules="watchInfoFormRules" ref="watchInfoForm" @submit.native.prevent>
                <el-form-item label="班次：" prop="watchClassId">
                    <el-select filterable v-model="watchInfoForm.watchClassId">
                        <el-option label="全部" value="-1"></el-option>
                        <el-option
                            v-for="item in classesOptions"
                            :key="item.id"
                            :label="item.orderName"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="值班人员：" prop="watchAccount">
                    <el-select filterable v-model="watchInfoForm.watchAccount">
                        <el-option
                            v-for="item in personnelOptions"
                            :key="item.accountName"
                            :label="item.name"
                            :value="item.accountName">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="值班日期：" prop='watchDate'>
                    <el-date-picker
                        v-model="watchInfoForm.watchDate"
                        :picker-options="pickerOptions"
                        type="date"
                        placeholder="选择值班日期"
                        value-format="yyyy-MM-dd">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="开始时间：" prop='watchStartTime'>
                    <el-time-select
                        v-model="watchInfoForm.watchStartTime"
                        :picker-options="{
                            start: '00:00',
                            step: '00:05',
                            end: '23:55'
                        }"
                        placeholder="选择值班开始时间">
                    </el-time-select>
                </el-form-item>
                <el-form-item label="结束时间：" prop='watchEndTime'>
                    <el-time-select
                        v-model="watchInfoForm.watchEndTime"
                        :picker-options="{
                            start: '00:00',
                            step: '00:05',
                            end: '23:55'
                        }"
                        placeholder="选择值班结束时间">
                    </el-time-select>
                </el-form-item>
            </el-form>
            <el-row class="verifyidentity-button">
                <el-button @click.stop="closeFun" round>取消</el-button>
                <el-button type="primary" @click="saveHandle" round>保存</el-button>
            </el-row>
        </el-col>
    </el-row>
</template>
<script>
import utils from '@/utils/util'
import {updateDetails} from '@/api/watch'

export default {
    props: {
        organizationId: {
            required: true
        },
        closeFun: {
            required: true
        },
        oldInfo: {
            required: true
        },
        classesInfo: {
            required: true
        },
        userList: {
            required: true
        }
    },
    data() {
        return {
            classesOptions: this.classesInfo,
            personnelOptions: this.userList,
            pickerOptions: {
                disabledDate: (time) => {
                    let nowData = new Date()
                    nowData = new Date(nowData.setDate(nowData.getDate()))
                    return time < nowData
                }
            },
            watchInfoForm: {
                id: '',
                organizationId: this.organizationId,
                watchClassId: '',
                watchAccount: '',
                watchDate: '',
                watchStartTime: '',
                watchEndTime: ''
            },
            watchInfoFormRules: {
                watchClassId: [
                    { required: true, message: '请选择班次', trigger: 'change' },
                ],
                watchAccount: [
                    { required: true, message: '请选择值班人', trigger: 'change' },
                ],
                watchDate: [
                    { required: true, message: '请选择值班日期', trigger: 'change' },
                ],
                watchStartTime: [
                    { required: true, message: '请选择开始时间', trigger: 'change' },
                ],
                watchEndTime: [
                    { required: true, message: '请选择结束时间', trigger: 'change' },
                ]
            }
        }
    },
    created() {
        let that = this
        if(this.oldInfo.id) {
            that.watchInfoForm.id = that.oldInfo.id,
            that.watchInfoForm.watchClassId = that.oldInfo.watchClassId,
            that.watchInfoForm.watchAccount = that.oldInfo.watchAccount,
            that.watchInfoForm.watchDate = that.oldInfo.watchDate,
            that.watchInfoForm.watchStartTime = utils.ilinkTimeformat.format(new Date(that.oldInfo.watchStartTime), 'hh:mm'),
            that.watchInfoForm.watchEndTime = utils.ilinkTimeformat.format(new Date(that.oldInfo.watchEndTime), 'hh:mm')
        }
    },
    methods: {
        startEndDataFormat(date, time) {
            // 12:12
            if(time) {
                return date.slice(0, 4) + '-' + date.slice(4, 6) + '-' + date.slice(6, 9) + ' ' + time + ':00'
            } else {
                return ''
            }
        },
        saveHandle() {
            let that = this
            that.$refs['watchInfoForm'].validate((valid) => {
                if(valid) {
                    let parames = that.watchInfoForm
                    parames.watchAccount = parames.watchAccount
                    parames.watchEndTime = that.startEndDataFormat(parames.watchDate, parames.watchEndTime),
                    parames.watchStartTime = that.startEndDataFormat(parames.watchDate, parames.watchStartTime)
                    updateDetails(parames).then(res => {
                        if(res.status === 200) {
                            this.$message.success('保存成功')
                            // 关闭弹框
                            this.closeFun(true)
                        } else {
                            this.$message.warning(res.info)
                        }
                    })
                } else {
                    return false
                }
            })
            
        }
    }
}
</script>
<style lang="scss">

</style>

